<!--学位考试管理-->
<template>
  <div class="courseBox">
    <div class="courseBoxTop">
      <div class="courseBoxTopSearch">
        <div class="courseName">
          <span>条件名称：</span>
          <el-input
            v-model="formSearch.degreeName"
            placeholder="请输入条件名称"
          />
        </div>
        <div class="profession">
          <span>条件类型：</span>
          <el-select
            v-model="formSearch.degreeType"
            placeholder="请选择条件类型"
          >
            <el-option
              v-for="item in option"
              :key="item.typeId"
              :label="item.typeName"
              :value="item.typeName"
            ></el-option>
          </el-select>
        </div>

        <div class="searchAndReset">
          <el-button class="searchBtn" @click="searchInput">
            <i class="el-icon-search"></i>
            <span>搜索</span>
          </el-button>
          <el-button class="resetBtn" @click="refreshInput">
            <i class="el-icon-refresh"></i>
            <span>重置</span>
          </el-button>
        </div>
      </div>
    </div>

    <!-- 管理列表 -->
    <div class="courseBoxBottom">
      <div class="bottomHeader">
        <span class="title">管理列表</span>
        <div class="bottomHeaderBtn">
          <el-button class="addBtn" @click="openAdd">
            <i class="el-icon-plus"></i>
            <span>新增</span>
          </el-button>
          <el-button class="delBtn" @click="batchDel">
            <i class="el-icon-close"></i>
            <span>批量删除</span>
          </el-button>
        </div>
      </div>

      <!-- 表格 -->
      <div class="bottomMian">
        <el-table
          :data="tableData"
          ref="multipleTable"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="50"> </el-table-column>
          <el-table-column
            type="index"
            label="序号"
            width="80"
          ></el-table-column>
          <el-table-column prop="degreeName" label="条件名称"></el-table-column>
          <el-table-column prop="degreeType" label="条件类型"></el-table-column>
          <el-table-column
            prop="examinationResults"
            label="考试成绩"
          ></el-table-column>
          <el-table-column
            prop="ordinaryTimesResults"
            label="平时成绩"
          ></el-table-column>
          <el-table-column prop="createTime" label="创建时间"></el-table-column>
          <el-table-column fixed="right" label="操作">
            <template slot-scope="scope">
              <span
                class="icon edit"
                @click="handleEdit(scope.row)"
              >编辑</span>
              <span
                class="icon del"
                @click="handleDel(scope.row.id)"
              >删除</span>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <div class="pagination">
          <el-pagination
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-size="10"
            prev-text="上一页"
            next-text="下一页"
            layout=" prev, pager, next"
            :total="total"
          >
          </el-pagination>
          <div class="jumper">
            跳到第
            <input type="text" ref="currentPage" value="1" />
            页
          </div>
          <button class="submit" @click="goPage">确定</button>
        </div>
      </div>
    </div>

    <!-- 新增条件 -->
    <div class="dialog">
      <el-dialog
        :title="isEdit ? '编辑条件' : '添加条件'"
        :visible.sync="dialogFormVisible"
        center
      >
        <el-form
          ref="form"
          label-position="right"
          :model="form"
          label-width="100px"
        >
          <el-form-item label="条件名称：">
            <el-input
              v-model="form.degreeName"
              placeholder="请输入条件名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="条件类型：">
            <el-select v-model="form.degreeType" placeholder="请选择条件类型">
              <el-option
                v-for="item in option"
                :key="item.typeId"
                :label="item.typeName"
                :value="item.typeName"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="考试成绩：">
            <el-input
              v-model="form.examinationResults"
              placeholder="请输入考试成绩"
            ></el-input>
          </el-form-item>
          <el-form-item label="平时成绩：">
            <el-input
              v-model="form.ordinaryTimesResults"
              placeholder="请输入平时成绩"
            ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="closeAdd">取 消</el-button>
          <el-button type="primary" @click="confirmAdd">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import "@/styles/picture.scss";
import { _debounce } from "../../utils/debounce";
import { getClassifyListApi } from "@/api/basics/classify";
import {
  addDegreeConditionstApi,
  delDegreeConditionstApi,
  editDegreeConditionstApi,
  getDegreeConditionstListApi,
} from "@/api/degree/degreeconditions";

export default {
  data() {
    return {
      isEdit: false, //是否编辑
      dialogFormVisible: false, // 是否开启弹框
      // 搜索数据
      formSearch: { degreeName: "", degreeType: "" },
      // 新增/ 编辑 弹框数据
      form: {
        id: "",
        degreeName: "",
        degreeType: "",
        examinationResults: "",
        ordinaryTimesResults: "",
      },
      // 条件类型下拉数据
      option: [
        { typeId: 214, typeName: "研究生" },
        { typeId: 213, typeName: "博士生" },
      ],
      tableData: [], // 表格数据
      currentPage: 1, // 当前页码
      pageSize: 10, // 每页条数
      total: 0, // 数据总数
      multipleSelection: [], // 选中数据
    };
  },

  created() {
    // 获取条件列表
    this.getDegreeConditionstList({
      pageNum: this.currentPage,
      pageSize: this.pageSize,
    });

    // 获取条件类型列表
    this.getTypeList({
      parentId: 212,
    });
  },

  methods: {
    // 获取条件列表
    async getDegreeConditionstList(data) {
      let res = await getDegreeConditionstListApi(data);
      if (res.code === 200) {
        this.tableData = res.rows;
        this.total = res.total;
      }
    },

    // 获取条件类型列表
    async getTypeList(data) {
      let res = await getClassifyListApi(data);
      this.option = res.rows;
    },

    // 搜索
    searchInput: _debounce(function () {
      this.getDegreeConditionstList({
        pageNum: this.currentPage,
        pageSize: this.pageSize,
        ...this.formSearch,
      });
    }, 500),

    // 重置
    refreshInput: _debounce(function () {
      this.formSearch = { degreeName: "", degreeType: "" };
      this.getDegreeConditionstList({
        pageNum: this.currentPage,
        pageSize: this.pageSize,
      });
    }, 500),

    // 新增
    openAdd() {
      this.form = {
        id: "",
        degreeName: "",
        degreeType: "",
        examinationResults: "",
        ordinaryTimesResults: "",
      };
      this.isEdit = false;
      this.dialogFormVisible = true;
    },

    // 编辑
    handleEdit(row) {
      this.isEdit = true;
      this.dialogFormVisible = true;
      this.form = row;
    },

    // 取消新增 / 编辑
    closeAdd() {
      this.form = {
        id: "",
        degreeName: "",
        degreeType: "",
        examinationResults: "",
        ordinaryTimesResults: "",
      };
      this.isEdit = false;
      this.dialogFormVisible = false;
    },

    // 确定新增
    confirmAdd: _debounce(function () {
      if (this.isEdit) {
        editDegreeConditionstApi(this.form).then((res) => {
          if (res.code === 200) {
            this.$message.success("修改成功！");
            this.dialogFormVisible = false;
            // 获取条件列表
            this.getDegreeConditionstList({
              pageNum: this.currentPage,
              pageSize: this.pageSize,
            });
          } else {
            this.$message.error("修改失败！");
          }
        });
      } else {
        addDegreeConditionstApi(this.form).then((res) => {
          if (res.code === 200) {
            this.$message.success("添加成功！");
            this.dialogFormVisible = false;
            // 获取条件列表
            this.getDegreeConditionstList({
              pageNum: this.currentPage,
              pageSize: this.pageSize,
            });
          } else {
            this.$message.error("添加失败！");
          }
        });
      }
    }, 500),

    //删除
    handleDel(ids) {
      this.$confirm("确认删除当前数据吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message("正在删除~");
          delDegreeConditionstApi({ ids }).then((res) => {
            if (res.code === 200) {
              this.$message.success("删除成功!");
              // 获取条件列表
              this.getDegreeConditionstList({
                pageNum: this.currentPage,
                pageSize: this.pageSize,
              });
            } else {
              this.$message.error("删除失败!");
            }
          });
        })
        .catch(() => {});
    },

    // 批量删除
    batchDel() {
      let data = [...this.multipleSelection].map((item) => {
        return "" + item.id;
      });
      let ids = data.join(",");
      if ([...this.multipleSelection].length > 0) {
        this.$confirm("确认删除当前数据吗?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.$message("正在删除~");
            delDegreeConditionstApi({ ids }).then((res) => {
              if (res.code === 200) {
                this.$message.success("删除成功!");
                // 获取条件列表
                this.getDegreeConditionstList({
                  pageNum: this.currentPage,
                  pageSize: this.pageSize,
                });
              } else {
                this.$message.error("删除失败!");
              }
            });
          })
          .catch(() => {});
      } else {
        this.$message.error("请选择要删除的数据!");
      }
    },

    // 已选中
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },

    // 当前页码
    handleCurrentChange(val) {
      this.currentPage = val;
      // 获取条件列表
      this.getDegreeConditionstList({
        pageNum: this.currentPage,
        pageSize: this.pageSize,
        ...this.formSearch,
      });
    },
    // 跳转当前页
    goPage() {
      let { value } = this.$refs.currentPage;
      this.currentPage = Number(value);
      // 获取条件列表
      this.getDegreeConditionstList({
        pageNum: this.currentPage,
        pageSize: this.pageSize,
        ...this.formSearch,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.courseBox {
  width: 100%;
  padding: 10px;
  .top {
    width: 100%;
    margin-bottom: 10px;
  }
  .edit{
    color: #1990FF;
    cursor: pointer;
  }
  .del{
    color: #1990FF;
    margin-left: 10px;
    cursor: pointer;
  }
  .dialog {
    .block {
      width: 280px;
      height: 30px;
      border: solid 1px #dcdfe6;
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-sizing: border-box;
      background-color: #fff;

      ::v-deep .el-input__inner {
        width: 240px;
        height: 28px;
        border: none;
      }

      ::v-deep .el-icon-arrow-down {
        color: #c2c2c2;
        padding: 0 10px 0 0;
      }

      ::v-deep .el-icon-arrow-up {
        color: #c2c2c2;
        padding: 0 10px 0 0;
      }

      ::v-deep .el-date-picker.has-sidebar {
        left: 460px !important;
        background-color: #4895db;
      }
    }

    ::v-deep .el-dialog {
      max-width: 750px;
      min-width: 500px;
      border-radius: 10px;
      background-color: #f9f9f9;
    }

    ::v-deep .el-dialog__header {
      height: 48px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      background-color: #4895db;
      padding: 0;
      border-radius: 10px 10px 0 0;

      span {
        font-size: 16px;
        color: #fff;
      }
    }

    ::v-deep .el-select > .el-input {
      display: block;
      width: 300px;
    }

    ::v-deep .el-form-item__label {
      line-height: 32px;
    }

    ::v-deep .el-input__inner {
      height: 30px;
      line-height: 30px;
    }

    ::v-deep .el-dialog__headerbtn {
      top: 15px;
    }

    ::v-deep .el-dialog__headerbtn .el-dialog__close {
      color: #fff;
      font-size: 18px;
    }

    ::v-deep .el-dialog--center .el-dialog__body {
      text-align: initial;
      display: flex;
      justify-content: center;
    }

    ::v-deep .el-input__icon {
      line-height: 30px;
    }

    ::v-deep .el-form-item__content {
      width: 300px;
      line-height: 30px;
    }

    ::v-deep .el-form-item {
      margin-bottom: 15px;
    }

    ::v-deep .el-dialog__footer {
      padding: 10px 20px 50px;
    }

    ::v-deep .el-button--default {
      width: 130px;
      border-radius: 20px;
      background-color: #f0f0f0;
      color: #aaaaaa;
      border: none;
    }

    ::v-deep .el-button + .el-button {
      width: 130px;
      border-radius: 20px;
      margin-left: 50px;
      background-color: #4895db;
      border-color: #4895db;
    }
  }
}
</style>
